<template>
  <div>
    <div id="chart" :style="{ width: '100%', height: height }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myCharts: null,
      arrX: ['北京', '上海', '广州', '深圳', '杭州', '南京', '苏州', '武汉', '合肥', '郑州', '天津', '长沙', '重庆'],
      arrY: [1000, 900, 800, 850, 400, 100, 600, 500, 300, 880, 100, 700, 1200],
    };
  },
  watch: {},
  mounted() {
    this.drawFftjChart();
  },
  beforeDestroy() {
    if(!this.myCharts){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myCharts.dispose()
  },
  methods: {
    drawFftjChart() {
      let yData = this.arrY;
      this.myCharts = echarts.init(document.getElementById("chart"));
      this.myCharts.setOption({
        grid: { // 容器距离
          left: "3%",
          right: "5%",
          top: "5%",
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            return (
              parms.marker + " " + parms.name + "：" + parms.value + "万辆"
            );
          },
        },
        xAxis: {
          type: "category", // category(坐标轴类型)
          data: this.arrX,
          axisTick: {
            // 坐标轴刻度相关配置
            show: true, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            lineStyle: {
              // 坐标轴轴线样式
              color: "#666666", // 坐标轴轴线颜色
            },
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#000",
            fontSize: 14,
            margin: 20,
          },
        },
        yAxis: {
          type: "value", // value(数值轴,适用于连续数据)
          name: "单位：万辆",
          nameTextStyle: {
            color: "#000",
            fontSize: 12,
          },
          axisTick: {
            // 坐标轴刻度相关配置
            show: true, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#000",
            fontSize: 14,
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              // 分割线配置
              color: "rgba(255,255,255,0.15)", // 分割线颜色
            },
          },
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar", // pictorialBar(象形柱图)
            label: {
              // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
              // show: true, //是否显示标签
              position: ["17", "-30"], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
              color: "#01E4FF",
              fontSize: 14,
            },
            symbolSize: [30, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 10], // 图形相对于原本位置的偏移
            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
            itemStyle: {
              // 图形样式
              // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
              // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // 这里 offset: 0 1 ,表示从下往上的渐变色
                {
                  offset: 0, // 0%处的颜色
                  color: "rgba(31,155,255,1)",
                },
                {
                  offset: 1, // 100%处的颜色
                  color: "#1F61EA",
                },
              ]),
            },
            data: yData,
          },
          // 中间的长方形柱状图(柱状图):bar
          {
            type: "bar", // 柱状图
            barWidth: 30, // 柱条的宽度,不设时自适应
            barGap: "0%", // 柱子与柱子之间的距离
            itemStyle: {
              // 图形样式
              // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#000,也支持渐变色和纹理填充)
              // 下面就是使用线性渐变
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0, // 0%处的颜色
                    color: "rgba(34,68,172,0.9)",
                  },
                  {
                    offset: 1, // 100%处的颜色
                    color: "rgba(0,183,255,0.8)",
                  },
                ],
              },
            },
            data: yData,
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar",
            symbolSize: [30, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(31,155,255,0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,229,255,0.5)",
                  },
                ],
                false
              ),
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#000",
              },
            },
            data: yData,
          },
        ],
      });
      window.addEventListener("resize", () => {
        this.myCharts.resize();
      });
    },
  },
};
</script>